Frontend 개발 개요

현대적인 프론트엔드 개발을 위한 기초 이론부터 프레임워크별 실전 프로젝트까지, 단계별 학습 콘텐츠를 제공합니다.

---

1. 프론트엔드 기초 (Fundamentals)

웹의 동작 원리와 개발 환경 구축에 대해 다룹니다.

• 웹 렌더링 전략 (CSR, SSR, SSG) 개요
• Bundler란 무엇인가
• Vite란?
• [ESLint, Prettier, Babel 완벽 가이드](./1.Fundamentals/ESLint, Prettier, Babel 완벽 가이드.md)

---

2. 핵심 기술 스택 (Technologies)

가장 대중적으로 사용되는 프레임워크와 언어, 스타일링 도구를 학습합니다.

• [React vs Vue vs Svelte vs Angular 비교](./2.Technologies/주요 프론트엔드 프레임워크 비교.md)
• [Astro란 무엇인가: 성능 중심 프레임워크](./2.Technologies/Astro란 무엇인가.md)
• [TypeScript 기초와 필요성](./2.Technologies/TypeScript 기초와 필요성.md)
• [Zustand와 Pinia 현대적 상태 관리](./2.Technologies/Zustand와 Pinia 현대적 상태 관리.md)
• [Tailwind CSS 디자인 가이드](./2.Technologies/Tailwind CSS 디자인 가이드.md)

---

3. Next.js (React Ecosystem)

가장 강력한 React 프레임워크인 Next.js의 실무 활용 팁입니다.

• [Next.js 외부 이미지 불러오기 및 최적화](./3.Nextjs/nextjs 외부 이미지 불러오기.md)
• MDX 코드 블록 스타일링 가이드

---

4. Nuxt.js (Vue Ecosystem)

Vue.js 기반의 메타 프레임워크인 Nuxt.js의 핵심 개념과 실전 프로젝트를 다룹니다.

핵심 개념 (Core Knowledge)

• Nuxt.js 핵심 개념 및 디렉토리 구조
• Nuxt.js 데이터 페칭 가이드 (useFetch vs useAsyncData)
• Nuxt.js 렌더링 모드 및 하이브리드 전략

실전 프로젝트 (Project)

• Nuxt 대시보드 제작 시리즈 (0): 개요 및 기술 스택
• Nuxt 대시보드 제작 시리즈 (1): 프로젝트 생성 및 초기 설정
• Nuxt 대시보드 제작 시리즈 (2): Naive UI와 UnoCSS 연동하기
• Nuxt 대시보드 제작 시리즈 (3): Pinia를 이용한 상태 관리 설계
• Nuxt 대시보드 제작 시리즈 (4): 대시보드 레이아웃 구현
• Nuxt 대시보드 제작 시리즈 (5): 데이터 시각화 및 페이지 구현